<style scoped lang="scss">

    $bg_color:#e7eaf0;

    .container{
      width:100%;
      height: 100px;
      background:$bg_color ;
      clear: both;
      float: left;
      margin: 0px;
    }

    .font{
      font-family: '微软雅黑';
      color:#5b5b5b;
    }

  .project-title{

    @extend  .font;
    margin:10px;
    padding: 0px;
    text-align: center;
    margin-bottom: 10px;
    font-size: 28px;
  }

  .text-desc{

    @extend  .font;

    height: 25px;
    line-height: 25px;
    text-align: center;
    font-size: 14px;
  }

  .icon-edit{
    display: inline-block;
    height: 15px;
    width: 15px;
    background-image: url("../../../../assets/images/edit-icon.png");
    background-size: cover;
    vertical-align: middle;
    /*margin: 5px;*/
  }

  .text-group{
    display: inline-block;
    width:160px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .text-lbl{
    margin-right: 8px;
  }


</style>

<template>
  <div class="container">
      <h3 class="project-title">{{projectName}}</h3>
      <div class="text-desc">
        <div class="text-group">
          <span class="text-lbl">创建日期:</span>
          <span>{{createTime}}</span>
        </div>
        <div class="text-group">
          <span class="text-lbl">施工单位:</span>
          <span>{{buildOrganization}}</span>
        </div>
        <div class="text-group">
          <span class="text-lbl">项目ID:</span>
          <span>{{projectId}}</span>
        </div>
        <div class="text-group" style="width: 30px;">
          <span class="icon-edit"></span>
        </div>
      </div>
  </div>
</template>

<script>
  export default {
      name:"ProjectDetailTitle",
      props:{
        projectName:{
          type:String,
          required:true,
          default:''
        },
        createTime:{
          type:String,
          required:true,
          default:new Date().toLocaleString()
        },
        buildOrganization:{
          type:String,
          required:true,
          default:''
        },
        projectId:{
          type:String,
          required:true,
          default:''
        }
      }
  }
</script>
